<template>
  <div class="hello">
    <div class="banner">
      <div class="banner_top">
        <div class="banner_top_left">
          <img src="../assets/logo2.jpg" alt="">
          <ul>
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/destination">目的地</router-link></li>
            <li><router-link to="/strategy">旅行攻略</router-link></li>
            <li><router-link to="/stay">住宿</router-link></li>
            <li><router-link to="/ticket">机票</router-link></li>
            <li><router-link to="/about">联系我们</router-link></li>
          </ul>
        </div>
        <div class="banner_top_right">
          <input type="text" placeholder="请输入目的地/关键词">
          <p>登录</p> <p>登录</p><img src="../assets/user2.png" alt="">
        </div>
      </div>
      <div class="line"></div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
*{margin: 0 ;padding:0;}
.banner{width: 100%;color: black;border: 0px solid pink;padding-top: 10px;}
.banner_top,.banner_top_left,.banner_top_right,.banner_top_left ul{display: flex;flex-direction: row;}
.banner_top{justify-content: space-between;}
.banner_top2{img{display: block;margin: 0 auto;}}
.banner_top_left{margin-left:5%;width: 65%;}
.banner_top_right{margin-right: 5%;}
.banner_top_left ul{width: 60%;justify-content: space-around;}
.banner_top_left ul li{list-style-type: none;line-height: 100px;}
.banner_top_left ul li a{text-decoration: none;color: black;padding: 10px 0px;&.router-link-exact-active,&:hover{border-bottom: 3px solid black;}}
.banner_top_right img{width: 30px;height: 30px;margin-top:35px;}
.banner_top_right input{outline:none;height: 30px;border-top-left-radius:15px;border-top-right-radius:15px;border-bottom-right-radius:15px;background-image: url(../assets/search.png);background-position: 95% center;background-size: 20px;background-repeat: no-repeat;border-bottom-left-radius:15px;padding: 0 0 0 10px;margin-top:35px;}
.banner_top_right p{margin-top: 35px;padding:5px 15px;}
.line{width: 100%;background-color: #eaeaea;height: 3px;margin: 10px 0;}
</style>
